<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抖音视频页面</title>

    <link rel="stylesheet" href="./css/huacommon.css" />
    <link rel="stylesheet" href="./css/huadetail.css" />
    <style></style>
  </head>
  <body>
    <div class="back" onclick="window.history.back()">
      <img src="./svg/返回.svg" alt="" />
    </div>
    <!-- 视频容器 -->
    <div class="video-container">
      <img src="./imgs/tuku1.png" alt="" />
      <!-- <video class="video" autoplay loop muted>
        <source src="video.mp4" type="video/mp4" />
        您的浏览器不支持 HTML 视频标签。
      </video> -->
    </div>

    <!-- 视频内容 -->
    <div class="video-content">
      <!-- 用户信息 -->
      <div class="user-info">
        <img class="avatar" src="./imgs/avatr12.png" alt="用户头像" />
        <div class="info">
          <div style="display: flex; align-items: center; margin-bottom: 10px">
            <p class="username">栗子吃栗子</p>
            <button class="follow-btn">关注</button>
          </div>
          <p class="description">氛围感live实况热歌bgm</p>
        </div>
      </div>

      <!-- 视频互动按钮 -->
      <div class="interaction">
        <div class="icon" id="like-container">
          <img src="./svg/点赞 (1).svg" alt="点赞" id="like-icon" />
          <img
            src="./svg/点赞-red.svg"
            alt="点赞"
            id="liked-icon"
            style="display: none" />
          <span id="like-count">1.2w</span>
        </div>
        <div class="icon">
          <img src="./svg/评论.svg" alt="评论" />
          <span>256</span>
        </div>
        <div class="icon">
          <img src="./svg/分享.svg" alt="分享" />
          <span>分享</span>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="nav-item active">首页</div>
      <div class="nav-item">朋友</div>
      <div class="nav-item">消息</div>
      <div class="nav-item" onclick="window.location.href='me.html'">我</div>
    </div>
    <script src="./js/detail.js"></script>
  </body>
</html>
